<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ page import="javax.servlet.http.HttpSession" %>
<%@ page import="com.example.model.Book" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书购买 - 应急防护小站</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen text-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto flex items-center justify-between px-4 h-16">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-shield-alt text-green-600 text-2xl"></i>
                <span class="text-xl font-bold">应急防护小站</span>
            </div>
            <div class="flex items-center space-x-2">
                <a href="index.jsp" class="px-4 py-2<%=(request.getRequestURI().endsWith("index.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>"><i class="fa-solid fa-house mr-1"></i>首页</a>
                <a href="quiz" class="px-4 py-2<%=(request.getRequestURI().endsWith("quiz.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>"><i class="fa-solid fa-question-circle mr-1"></i>答题功能</a>
                <a href="${pageContext.request.contextPath}/books" class="px-4 py-2<%=(request.getRequestURI().endsWith("books.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>"><i class="fa-solid fa-cart-shopping mr-1"></i>图书购买</a>
                <a href="user-profile" class="px-4 py-2<%=(request.getRequestURI().endsWith("user-profile.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>"><i class="fa-solid fa-user mr-1"></i>个人信息</a>
                <a href="submit-article" class="px-4 py-2<%=(request.getRequestURI().endsWith("submit-article.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>"><i class="fa-solid fa-pen-to-square mr-1"></i>我要投稿</a>
                <a href="feedback" class="px-4 py-2<%=(request.getRequestURI().endsWith("feedback.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>"><i class="fa-solid fa-comment-dots mr-1"></i>问题反馈</a>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">防护图书购买</h1>
            <p class="text-xl text-gray-600">专业防护知识，守护生命安全</p>
        </div>
        
        <!-- 图书网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <c:forEach var="book" items="${books}">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 flex flex-col relative">
                    <div class="h-48 bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center relative">
                        <img src="${book.coverUrl != null && book.coverUrl != '' ? book.coverUrl : 'https://dummyimage.com/200x300/eee/333&text=' + encodeURIComponent(book.name)}"
                             alt="${book.name}"
                             class="h-40 object-contain rounded shadow"
                             onerror="this.onerror=null;this.src='https://dummyimage.com/200x300/eee/333&text=' + encodeURIComponent('${book.name}')"/>
                        <button onclick="addToCart(${book.id})" class="absolute bottom-2 right-2 bg-orange-600 hover:bg-orange-700 text-white px-3 py-1 rounded shadow flex items-center gap-1 text-sm z-10"><i class='fa-solid fa-cart-plus'></i> 加入购物车</button>
                    </div>
                    <div class="p-6 flex-1 flex flex-col">
                        <h3 class="text-lg font-bold text-gray-900 mb-2">${book.name}</h3>
                        <div class="text-gray-500 text-sm mb-1">作者：${book.author}</div>
                        <div class="text-gray-500 text-sm mb-1">价格：￥${book.price}</div>
                        <div class="text-gray-500 text-sm mb-1">库存：${book.stock}</div>
                        <div class="text-gray-500 text-sm mb-1">简介：${book.description}</div>
                        <div class="flex gap-2 mt-auto">
                            <a href="book-detail?bookId=${book.id}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">查看详情</a>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        
        <!-- 购物车区域 -->
        <div class="mt-12 bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                <i class="fa-solid fa-shopping-cart text-orange-600 mr-3"></i>购物车
            </h2>
            <div class="text-center py-8">
                <i class="fa-solid fa-shopping-cart text-gray-300 text-6xl mb-4"></i>
                <p class="text-gray-500 text-lg">购物车是空的</p>
                <p class="text-gray-400 text-sm mt-2">选择您需要的防护图书添加到购物车</p>
            </div>
        </div>
        
        <!-- 推荐区域 -->
        <div class="mt-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl p-8 text-white">
            <h2 class="text-2xl font-bold mb-4">防护图书套装</h2>
            <p class="text-orange-100 mb-6">购买全套防护图书，享受8折优惠，全面提升应急防护能力</p>
            <button class="bg-white text-orange-600 px-6 py-3 rounded-lg font-bold hover:bg-orange-50 transition-colors">
                <i class="fa-solid fa-gift mr-2"></i>查看套装详情
            </button>
        </div>
    </main>
    
    <!-- 底部信息区 -->
    <footer class="bg-gray-900 text-white py-10 mt-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa-solid fa-shield-alt text-orange-400 text-2xl"></i>
                        <span class="text-xl font-bold">应急防护小站</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">守护生命安全</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">防护分类</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="disaster-earthquake.jsp" class="hover:text-white">地震防护</a></li>
                        <li><a href="disaster-fire.jsp" class="hover:text-white">火灾防护</a></li>
                        <li><a href="disaster-typhoon.jsp" class="hover:text-white">台风防护</a></li>
                        <li><a href="disaster-flood.jsp" class="hover:text-white">洪水防护</a></li>
                        <li><a href="disaster-extremeheat.jsp" class="hover:text-white">极端天气</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#about" class="hover:text-white">关于我们</a></li>
                        <li><a href="submit-article.jsp" class="hover:text-white">我要投稿</a></li>
                        <li><a href="books" class="hover:text-white">防护用品</a></li>
                        <li><a href="feedback.jsp" class="hover:text-white">问题反馈</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">订阅我们</h3>
                    <p class="text-gray-400 text-sm mb-4">订阅我们的防护周刊，获取最新应急资讯</p>
                    <div class="flex">
                        <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <button class="bg-orange-600 hover:bg-orange-700 text-white px-4 rounded-r-lg"><i class="fa-solid fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2025 应急防护小站. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</div>
<script>
function addToCart(bookId) {
    fetch('cart', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'action=add&bookId=' + bookId + '&quantity=1'
    }).then(res => res.text()).then(() => {
        refreshCart();
    });
}
function refreshCart() {
    fetch('cart.jsp')
        .then(res => res.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const cartSection = doc.querySelector('#cart-section');
            if(cartSection) document.getElementById('cart-section').innerHTML = cartSection.innerHTML;
        });
}
document.addEventListener('DOMContentLoaded', refreshCart);
</script>
</body>
</html> 